<template>
  <div class="images-container">
    <viewHeader ref="viewHeader" :file-id="fileId" />
    <viewer :images="[global.getFileView(fileId)]" class="images-content">
      <div class="img-container">
        <img :src="global.getFileView(fileId)">
      </div>
    </viewer>
  </div>
</template>
<script>
import viewHeader from './header.vue'
export default {
  components: { viewHeader },
  data() {
    return {
      fileId: null,
      fileImages: [],
      imagesList: []
    }
  },
  mounted() {
    var { id } = this.$route.params
    this.fileId = id
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
  .images-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .images-content{
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .img-container{
        margin: 0 auto;
        max-height: 700px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
